<template>
  <div class="datetime">
    <div class="dateList">
      <div class="routeName">{{ $route.name }}</div>
      <div class="dateSearch">
        <div>
          <div class="flexSearch">
            <span>地块：</span>
            <div>
              <el-button size="mini" :class="params.landId === '' && 'checkButton'" @click="params.landId = '', getAgriplanlist()">全部</el-button>
              <el-button size="mini" v-for="item in landList" :class="params.landId === item.landId && 'checkButton'" :key="item.landId" @click="params.landId = item.landId, getAgriplanlist()">{{item.landName}}</el-button>
            </div>
          </div>
          <div class="flexSearch">
            <span>农事：</span>
            <div>
              <el-button size="mini" :class="params.agriCode === '' && 'checkButton'" @click="params.agriCode = '', getAgriplanlist()">全部</el-button>
              <el-button size="mini" v-for="item in landTypes" :class="params.agriCode === item.code && 'checkButton'"  :key="item.id" @click="params.agriCode = item.code, getAgriplanlist()">{{item.name}}</el-button>
            </div>
          </div>
        </div>
        <div class="flexEndSearch">
          <div>
            <el-button type="primary" size="small" class="addBtn greenBtn" @click="addDate()">
              <i class="el-icon-plus"></i>
              添加计划
            </el-button>
          </div>
          <div class="mt10">
            <!-- <el-input
              size="small"
              class="searchInp greyBackground"
              v-model="params.landName"
              placeholder="搜索地块"
              suffix-icon="el-icon-search"
            ></el-input> -->
          </div>
        </div>
      </div>
      <div class="dateLine"></div>
      <div class="dateHeight">
        <div class="dateContent">
          <div class="datePlan"  v-for="item in calendarOptions" :key="item.id" >
            <div class="planTitle">
              {{item.agriName}}
            </div>
            <div class="planTime mt10">
              时间：{{item.startTime}}～{{item.endTime}}
            </div>
            <div class="planLand mt10">
              <span class="mr15">地块：{{item.landName}}</span>
              <span>操作人：{{item.userName}}</span>
            </div>
            <div class="planDesc mt10">
              备注：{{item.remark}}
            </div>
            <el-dropdown @command="handleCommand" @visible-change="getContent(item)">
              <span class="el-dropdown-link">
                <img src="@/assets/iconImage/more.png" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">查看</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @current-change="getAgriplanlist"
          :current-page.sync="params.current"
          :page-size="params.size"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="dateSelect">
      <oldDateTime />
    </div>
    <edit ref="edit"/>
  </div>
</template>

<script>
import { getAgriplanPageApi, getDetailById, deleteAgriplan } from '@/api/baseInfo'
import { getMaplandApi } from '@/api/landAdd'
import { getSysSonDictListApi } from '@/api/dict'
import edit from './component/edit' // 添加农事
import oldDateTime from '@/views/oldDateTime' // 农事日历

export default {
  name: 'DateTime',
  components: {
    edit,
    oldDateTime
  },
  data () {
    return {
      params: {
        current: 1,
        size: 9,
        landId: '',
        agriCode: ''
      },
      dialogVisible: false,
      checkButton: 0,
      checkTypes: 0,
      baseId: 0,
      landList: [],
      landTypes: [],
      calendarOptions: [],
      detailContent: null,
      startTime: null,
      endTime: null,
      total: 0
    }
  },
  mounted () {
    this.baseId = this.$store.getters.userInfo.baseId
    this.startTime = `${this.$moment().format('YYYY-MM')}-01`
    this.endTime = `${this.$moment().format('YYYY-MM')}-${this.$moment().daysInMonth()}`
    this.getLandList()
    this.getSysSonDictList()
    this.getAgriplanlist(1)
  },
  methods: {
    // 字典
    async getSysSonDictList () {
      const res = await getSysSonDictListApi('NS')
      this.landTypes = res.data
    },
    // 地块列表
    async getLandList () {
      const res = await getMaplandApi(this.baseId)
      this.landList = res.data
    },
    // 计划删除
    async addDel () {
      this.$alert(
        'Tips：删除后该计划相关信息都将会被删除',
        '确定删除该农事计划吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        deleteAgriplan({ ids: this.detailContent.id }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getAgriplanlist()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
        .catch(action => {
        })
    },
    // 编辑
    editDate () {
      this.$refs.edit.getData(this.detailContent, 1)
    },
    // // 显示计划详情
    showDetail (content) {
      getDetailById({ id: content.id }).then(res => {
        this.$set(this, 'detailContent', { ...res.data })
        this.dialogContent = true
      })
    },
    // 日历点击时间
    changeDay (day) {
      this.startTime = day
      this.endTime = day
      this.getAgriplanlist()
    },
    // 日历点击月份
    changeMonth (month) {
      this.startTime = `${this.$moment(month).format('YYYY-MM')}-01`
      this.endTime = `${this.$moment(month).format('YYYY-MM')}-${this.$moment(month).daysInMonth()}`
      this.getAgriplanlist()
    },
    // 计划数据
    async getAgriplanlist () {
      await getAgriplanPageApi({
        remark: this.search,
        startTime: this.startTime,
        endTime: this.endTime,
        baseId: this.baseId,
        ...this.params
      }).then(res => {
        this.calendarOptions = res.data.records
        this.total = res.data.total
      })
    },
    getDatesInRange (startDate, endDate) {
      const daysList = []
      const SDate = this.$moment(startDate)
      const EDate = this.$moment(endDate)
      daysList.push(SDate.format('YYYY-MM-DD'))
      while (SDate.add(1, 'days').isBefore(EDate)) {
        daysList.push(SDate.format('YYYY-MM-DD'))
      }
      daysList.push(EDate.format('YYYY-MM-DD'))
      return daysList
    },
    // 种植更多操作
    handleCommand (command) {
      console.log(command)
      switch (command) {
        case 'edit':
          this.editDate()
          break
        case 'delete':
          this.addDel()
          break
      }
    },
    // 获取详情
    getContent (content) {
      this.detailContent = content
    },
    // // 新增事项
    addDate () {
      // this.$refs.add.getData(this.detailContent)
      this.$router.push({
        path: '/centerindustry/dateTime/add',
        query: { ...this.detailContent }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .pagination {
    margin-top: 1.5625vw *0.834;
    text-align: right;
    margin-right: 2vw
  }
  .datetime {
    display: flex;
    .dateList {
      width: 75%;
      border-right: 1px solid #EEEEEE;
      padding-top: 25px;
      .dateSearch {
        margin-top: 20px;
        padding-right: 25px;
        display: flex;
        justify-content: space-between;
        .flexSearch {
          display: flex;
          align-items: flex-start;
          margin-bottom: 5px;
          span {
            width: 40px;
            line-height: 27.8px;
          }
          >div {
            width: calc(100% - 40px);
          }
          ::v-deep .el-button + .el-button {
            margin-left: 0;
          }
          ::v-deep .el-button {
            margin-right: 12px;
            margin-bottom: 10px;
            background: #F8F8F8;
            color: #333333;
            border: 1px solid #F8F8F8;
          }
          .checkButton {
            background: #00C586;
            border: 1px solid #00C586;
            color: #fff
          }
          .flexEndSearch {
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    .dateSelect {
      width: 25%;
    }
  }
  .dateLine {
    width: calc(100% - 20px);
    height: 1px;
    background: #EEEEEE;
  }
  .dateHeight {
    min-height: 62vh;
  }
  .dateContent {
    padding-top: 20px;
    // border-top: 1px solid #EEEEEE;
    display: flex;
    flex-wrap: wrap;
    .datePlan {
      width: 31.7%;
      height: 148px;
      margin-right: 1.33333%;
      background: #FAFAFA;
      margin-bottom: 12px;
      padding: 12px;
      font-size: 14px;
      position: relative;
      .planTitle {
        font-weight: 500;
        font-size: 18px;
        color: #000000;
      }
      .planDesc {
        border-top: 1px solid #E5E5E5;
        padding-top: 10px;
        color: #999999;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 更改数字以改变显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .planLand {
        color: #999999;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 更改数字以改变显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      ::v-deep .el-dropdown {
        position: absolute;
        right: 15px;
        top: 15px;
        .el-dropdown-link {
          img {
            width: 2.5px;
          }
        }
      }
    }
    .datePlan:nth-child(3n) {
      margin-right: 0;
    }
  }
  ::v-deep .el-dropdown-menu__item:hover {
    background-color: unset;
    color: #00C586;
  }
</style>
